<template>
	<!-- <view class="content" @dblclick="handleDoubleClick" @click.stop="sendLove"> -->
	<view class="content" @dblclick="handleDoubleClick">
		<view class="video-container" :style="{ height: windowheight + 'px' }">
			<video v-if="videoshow" class="myvideo" :src="pull" autoplay :controls="false"
				:show-center-play-btn="false" @error="error" id="myvideo"></video>
		</view>
		<view class="lwdh" v-show="lwshow" >
			<l-svga id="lwimg" ref="svga"></l-svga>
			<!-- <image :src="lwsrc" mode="widthFix" id="lwimg"></image> -->
		</view>
		
		<image :src="item.thumb" :fade-show="false" mode="aspectFill" class="fengmian-image"
			v-if="!videoshow"></image>
		<!-- <image src="/static/image/room/ing.png" :fade-show="false" mode="aspectFill" class="fengmian-image"
			v-if="!videoshow"></image> -->
		<!-- 播放按钮 -->
		<image v-if="!videoshow" src="/static/image/room/play3.png" mode="aspectFit" class="playicon"
			:style="{top:(windowheight/2)-30 + 'px',zIndex:playiconZIndex}" @tap="playvideo"></image>
		<!-- 手绘礼物 -->
		<transition name='fade'>
		<!-- <view class="hdlw" v-if="lwtype == 3 && lwid">
			<canvas 
			  canvas-id="giftCanvas"
			  class="gift-canvas"
			  @touchstart="startDrawing"
			  @touchmove="drawHeart"
			  @touchend="finishDrawing">
			</canvas>
			<view class="qy-container">
				<view class="qy">
					<image src="/static/image/room/Qy.png" mode=""></image>
				</view>
				<view class="desc">绘制礼物，进入涂鸦模式</view>
			</view>
		</view> -->
		</transition>
		<!-- 礼物列表 -->
		<uni-popup ref="liwu" type="bottom" mask-background-color="rgba(0,0,0,0)" @maskClick="onPopupLwClose"
			:isMaskClick="false">
		</uni-popup>
		<transition name='fade'>
		<view class="liwulist" :style="{zIndex:lwZIndex}" v-show="isliwu">
			<view class="nav-scroll">
				<view class="nav uni-nav">
					<view class="nav-item tab" :class="lwswiperIndex == 0 ? 'nav-item-act' : ''" @click="taggleNav(0)">
						礼物
					</view>
					<view class="nav-item tab" :class="lwswiperIndex == 1 ? 'nav-item-act' : ''" @click="taggleNav(1)">
						背包
					</view>
					<view class="nav-line" :style="style"></view>
				</view>
				<view class="lwdesc" v-if="lwswiperIndex == 0">
					礼物说明
					<image src="/static/image/room/back2.png" mode=""></image>
				</view>
			</view>
			<view class="lwswiper">
				<swiper :current="lwswiperIndex" :duration="300" class="swiper-2" easing-function="linear"
					@change="lwswiperChange" :disable-touch="lwtouch">
					<swiper-item @touchmove="lwtouchmove" @touchstart="lwtouchstart">
						<view class="lwdetail">
							<view class="lwtop">
								<swiper :disable-touch="lwlisttouch" class="swiper-3"   :current="lwlistIndex"
									 @change="lwlistswiperChange">
									<swiper-item v-for="(page, index) in giftlist" :key="index" @touchmove="lwlisttouchmove" @touchstart="lwlisttouchstart">
										<view class="page">
											<view class="gift" :class="lwid == row.id ? 'active' : ''" v-for="row in page" :key="row.id"
												@click="selectGift(row)">
												<!-- 礼物内容，例如图片和名称 -->
												<image :src="row.gifticon" class="gift-image" mode='aspectFit'></image>
												<text class="gift-name">{{ row.giftname }}</text>
												<text class="gift-money">{{ row.needcoin }}砖石</text>
											</view>
										</view>
									</swiper-item>
								</swiper>
								<view class="my-dot-box">
									<view class="dot-default" v-for="(item,index) in giftlist" :key='index'
										:class="lwlistIndex==index?'dot-active':''"></view>
								</view>
							</view>
							<view class="lwbottom">
								<view class="left">
									<view class="one">
										<image src="/static/image/room/jn.png" mode=""></image>
									</view>
									<view class="two">
										{{coin}}
									</view>
									<view class="three">
										充值
										<image src="/static/image/room/back2.png" mode=""></image>
									</view>
								</view>
								<!-- 未选中 -->
								<view class="right" v-if="!lwid">赠送</view>
								<!-- 手绘礼物 -->
								<view class="right" v-if="lwtype == 3 && lwid">暂无</view>
								<!-- 豪华礼物 -->
								<view class="right active" @click="sendGift" v-if="lwtype == 1 && lwid">赠送</view>
								<!-- 普通礼物 -->
								<view class="right2"  v-if="lwtype == 0 && lwid && ctime == 0">
									<view class="zstop" v-show="giftcountshow">
										<view class="list" >
											<view class="item" v-for="(item,index) in range" @click="change(item)">{{item}}</view>
										</view>
										<view class="arrow-up" v-show="giftcountshow">
											<image src="/static/image/room/bot.png" mode=""></image>
										</view>
									</view>
									<view class="picker" @tap="changegiftcount" ref="changegiftcount">
											<text>{{giftcount}}</text>
											<image src="/static/image/room/top.png" mode=""></image> 
									</view>
									<view class="right active" @click="sendGift">赠送</view>
								</view>
								<!-- 连送普通礼物 -->
								<view class="right3" v-if="lwtype == 0 && lwid && ctime != 0" @click="sendGift">
									<view>连送</view>
									<view>{{ctime}}s</view>
								</view>
							</view>
						</view>
					</swiper-item>
					<swiper-item @touchmove="lwtouchmove" @touchstart="lwtouchstart">
						<view class="lwdetail">
							<view class="lwtop">
								<swiper :disable-touch="lwlisttouch" class="swiper-3"   :current="lwlistIndex"
									 @change="lwlistswiperChange">
									<swiper-item v-for="(page, index) in proplist" :key="index" @touchmove="lwlisttouchmove" @touchstart="lwlisttouchstart">
										<view class="page">
											<view class="gift" :class="lwid == row.id ? 'active' : ''" v-for="row in page" :key="row.id"
												@click="selectGift(row)">
												<!-- 礼物内容，例如图片和名称 -->
												<image :src="row.gifticon" class="gift-image" mode='aspectFit'></image>
												<text class="gift-name">{{row.giftname }}</text>
												<text class="gift-money">{{row.needcoin }}砖石</text>
											</view>
										</view>
									</swiper-item>
								</swiper>
								<view class="my-dot-box">
									<view class="dot-default" v-for="(item,index) in proplist" :key='index'
										:class="lwlistIndex==index?'dot-active':''"></view>
								</view>
							</view>
							<view class="lwbottom">
								<view class="left">
									
						
								</view>
								<view class="right">赠送</view>
							</view>
						</view>
					</swiper-item>

				</swiper>
			</view>

		</view>
		</transition>
		<view class="swiper">
			<swiper :disable-touch="touch" :current="swiperIndex" :duration="300" class="swiper-1"
				easing-function="linear" @change="swiperChange" :style="{ height: windowheight + 'px' }">
				<swiper-item @touchmove="touchmove" @touchstart="touchstart">
					<view class="swiperitem1"></view>
				</swiper-item>
				<swiper-item @touchmove="touchmove" @touchstart="touchstart">
					<view class="swiperitem2">
						<!-- 顶部信息 -->
						<view class="top">
							<view class="left">
								<view class="zhubodata">
									<view class="himg" @click="showuser(item.uid)">
										<image :src="item.thumb" mode=""></image>
									</view>
									<view class="userdata">
										<view class="nickname">{{item.user_nicename}}</view>
										<view class="id">ID:{{item.uid}}</view>
									</view>
									<view class="guanzhu" v-show="isattention == 0" @click="setAttent(item.uid)">
										关注
									</view>
								</view>
								<view class="other">
									<view class="hudou">
										金币 {{votestotal}} <image src="/static/image/room/back2.png" mode=""></image>
									</view>
									<view class="shouhu">
										守护 虚位以待 <image src="/static/image/room/back2.png" mode=""></image>
									</view>
								</view>
							</view>
							<!-- 粉丝-前3 -->
							<view class="right">
								<view class="fsimg" @click="showuser(item.id)" v-for="(item,index) in userlists">
									<image :src="item.avatar" mode=""></image>
								</view>
							</view>
						</view>
						<!-- 弹幕显示 -->
						<view class="danmaku-display">
							<view class="danmu-container">
							    <view 
							      v-for="(danmu, index) in danmus"
							      :key="index"
							      class="danmu"
							      :style="danmu.style"
							    >
								<view class="dm-item" >
									<view class="dm-item-img">
										<image :src="danmu.uhead" mode=""></image>
									</view>
									<view class="dm-item-data">
										<view class="dm-item-data-one">{{ danmu.uname }}</view>
										<view class="dm-item-data-two">{{ danmu.text }}</view>
									</view>
								</view>
							    </view>
							  </view>
						  
						</view>
						
						<!-- 普通礼物显示 -->
						<view class="ptlw-view" v-if="ptlwshow">
							<view class="ptlw_item" v-for="(item,index) in ptlw_lists">
								<view class="scrolling-image-container">
									<image src="/static/image/room/M65.png" mode="" class="scrolling-image"></image>
								</view>
								<view class="ptlw_item_one">
									<image :src="item.uhead" mode=""></image>
								</view>
								<view class="ptlw_item_two">
									<view class="ptlw_item_two_name">
										{{item.uname}}
									</view>
									<view class="ptlw_item_two_title">
										送<text>{{item.giftname}}</text>
									</view>
								</view>
								<view class="ptlw_item_three">
									<image :src="item.gifticon" mode=""></image>
								</view>
								<view class="ptlw_item_four">
									x
								</view>
								<view class="ptlw_item_five" :class="{ 'ptlw_item_five_ani': item.isani }">
									{{item.giftcount}}
								</view>
								<view class="boomimg-container">
									<image src="/static/image/room/M64.png" mode="" class="boomimg"></image>
								</view>
							</view>
						</view>
						<!-- 聊天信息 -->
						<view class="msg-view">
							<mh-msgList ref="msgList" :msgList="msgList" :msgRoom="msgRoom"></mh-msgList>
						</view>
						<!-- 底部信息 -->
						<view class="bottombtn">
							<!-- 聊天 -->
							<view class="left">
								<view class="chat" @click="openInput">
									<image src="/static/image/room/xiaoxi.png" mode="" class="openInput"></image>
								</view>
							</view>
							<!-- 礼物、私信、退出 -->
							<view class="right">
								<view class="liwu" @click="liwu">
									<image src="/static/image/room/liwu.png" mode=""></image>
								</view>
								<view class="xinxi">
									<!-- <u-icon v-for="(item, index) in likesData"
										:class="['icon-default', `${item.animate}`]" :name="item.name"
										:color="item.color" :key="item.id"></u-icon> -->
									<image src="/static/image/room/xinxi.png" mode=""></image>
								</view>
								<view class="close" @click="close">
									<image src="/static/image/room/close.png" mode=""></image>
								</view>
							</view>
						</view>
						<!-- 弹出-聊天 -->
						<uni-popup ref="chat" type="bottom" @maskClick="onPopupChatClose" :isMaskClick="false"
							mask-background-color="rgba(0,0,0,0)">
							<view class="btnchat">
								<view class="left" @click="dmchange">
									<image src="/static/image/room/r01.png" mode="" v-if="!isdm"></image>
									<image src="/static/image/room/r0.png" mode="" v-if="isdm"></image>
								</view>
								<view class="middle">
									<input type="text" confirm-type="send" @confirm="sendMsg" class='form-input'
										v-model='inputModel' :focus="inputFocus" @input="onInput" @blur="blurInput"
										:placeholder="placeholder" placeholder-style="color:#cbcbcb">
									</input>
								</view>
								<view class="right">
									<image src="/static/image/room/send.png" mode="" v-if="inputModel == ''"></image>
									<image src="/static/image/room/send1.png" mode="" v-if="inputModel != ''"
										@click="sendMsg"></image>
								</view>
							</view>
						</uni-popup>

						<!-- 个人信息 -->
						<uni-popup ref="userinfo" type="bottom" @maskClick="onPopupUserinfoClose" :isMaskClick="false" mask-background-color="rgba(0,0,0,0)">
							<view class="userinfo1">
								<view class="top1">
									<view class="one">
										<view class="left">
											<image :src="user.avatar" mode=""></image>
										</view>
										<view class="isguanzhu" @click="setAttent(user.id)">
											<span v-if="user.isattention == 0">关注</span>
											<span v-if="user.isattention == 1">已关注</span>
										</view>
										<view class="right">
											<view class="rimg">
												<image src="/static/image/room/zhuye.png" mode=""></image>
											</view>
											<view class="rimg rimg2">
												<image src="/static/image/room/jubao.png" mode=""></image>
											</view>
										</view>
									</view>
									<view class="two">
										<view class="username">{{user.user_nicename}}
											<image src="/static/image/my/nan.png" mode="" v-if="user.sex == 1"></image>
											<image src="/static/image/my/nv.png" mode="" v-if="user.sex == 2"></image>
										</view>
										<view class="id">ID:{{user.id}}
											<view class="locate">
												<image src="/static/image/room/locate.png" mode=""></image>
											</view>
											<span>{{user.city == '' ? '城市未设置' : user.city}}</span>
										</view>
										<view class="achieve">
											<view class="ach ach1">
												<view class="achimg">
													<image :src="$api.levelimg(user.level)" mode=""></image>
												</view>
												<!-- <span>90</span> -->
											</view>
											<view class="ach ach2">
												<view class="achimg">
													<image :src="$api.levelanchorimg(user.level_anchor)" mode=""></image>
												</view>
												<!-- <span>95</span> -->
											</view>
										</view>
									</view>
									<view class="three">
										<view class="three_li">
											<view class="three_item1">{{user.follows}}</view>
											<view class="three_item2">关注</view>
										</view>
										<view class="three_li">
											<view class="three_item1">{{user.fans}}</view>
											<view class="three_item2">粉丝</view>
										</view>
										<view class="three_li">
											<view class="three_item1">{{user.consumption}}</view>
											<view class="three_item2">送出钻石</view>
										</view>
										<view class="three_li">
											<view class="three_item1">{{user.votestotal}}</view>
											<view class="three_item2">收入金币</view>
										</view>
									</view>
									<view class="four">
										<view class="four_li" v-for="(item,index) in user.label" :style="{backgroundColor:item.colour2}">{{item.name}}</view>
										<view class="four_li four_li1" @click="addlabel">+添加印象</view>
									</view>
								</view>

								<view class="bottom1">
									<view class="xiaoxi" @click="chat(user.chat_windows_url)">发消息</view>
									<view class="ata" @click="ata('@' + user.user_nicename + ' ')">@TA</view>
								</view>
							</view>
						</uni-popup>
						<!-- 私信 -->
						<uni-popup ref="sixin" type="bottom" @maskClick="onPopupSixinClose" :isMaskClick="false">
							<view class="chat_content">
								<iframe :src="user.chat_windows_url" style="width: 750rpx;border: none;height: 100%;overflow: hidden;"></iframe>
							</view>
						</uni-popup>

					</view>
				</swiper-item>

			</swiper>
		</view>


	</view>
</template>

<script>
	import _ from 'lodash';
	// import io from 'socket.io-client';
	import io from 'socket.io-client';
	export default {
		data() {
			return {
				danmutimer:null,
				danmuextime:0,
				danmus: [],
			    lines: [true, true, true],//弹幕轨道
			    linestime: [0, 0, 0],//轨道对应时间
				danmakus: [], // 存储弹幕数组
				drawPath: [], // 用于存储绘制路径
				ptlwtimer: null,
				ptlwshow: false,
				ptlw_list: [],
				hhlw_list: [],
				giftcount: "1",
				giftcountshow: false,
				continuous: false,
				continuoustimer: null,
				ctime: 0,
				range: ["1314","520","100","88","66","10","1"],
				playiconZIndex: 999, //播放按钮
				swiperIndex: 1, //当前的swiperindex
				likesData: [],
				lwZIndex: 991,
				coin: '',
				lwid: '',
				lwtype: '',
				lwshow: false,
				// lwsrc: '/static/image/room/dh2.gif',
				// lwsrc: 'https://shouhu1989.oss-cn-shanghai.aliyuncs.com/%E6%88%92%E6%8C%87.svga',
				// lwsrc: 'https://liwu1989.oss-cn-shanghai.aliyuncs.com/%E7%88%B1%E5%BF%83%E7%9B%B4%E5%8D%87%E6%9C%BA.svga',
				lwtime:6800,
				isliwu: false,
				lwtouch: false, //是否允许滑动
				isattention: 1, //是否关注
				lwtouchStart: 0, //第一次滑动的位置
				lwlisttouch: false, //是否允许滑动
				lwlisttouchStart: 0, //第一次滑动的位置
				lwswiperIndex: 0, //当前的lwswiperindex
				navItemWidth: '', //选中下划线的宽度
				navItemLeft: 0, //选中下划线的显示位置
				scrollToLeft: 0, //scrollview需要滚动的距离
				navInfos: [], //所有navitem的节点信息
				parentLeft: 0, //nav盒子的节点信息
				componentWidth: 0, //nav盒子的宽度
				lwlistIndex: 0,
				total: 0,
				placeholder: "和大家说些什么",
				isdm: false,
				inputModel: '',
				inputFocus: false,
				showInput: false,
				videoshow: false,
				windowheight: 0,
				currentLoveIndex: 0,
				liveuid: '',
				stream: '',
				myvideo: null,
				touch: false, //是否允许滑动
				touchStart: 0, //第一次滑动的位置
				msgList: [], //IM记录
				msgRoom: [],//进入直播间消息 
				pull: '', //直播流地址
				chatserver: '', //websocket聊天地址
				videourl: 'https://mp4.vjshi.com/2019-12-19/81543874c00aaef17aac412ceeb78069.mp4', //竖屏
				// videourl: 'https://mp4.vjshi.com/2023-09-03/f2bd67561ece493fb0e2b4673717730b.mp4', //横屏
				room: [], //直播信息
				item: [], //主播信息
				timer: null, //定时更新用户列表
				userlists: [], //用户列表
				giftlist: [], //礼物列表
				proplist: [], //道具列表
				user: [], //弹出用户信息
				self: [], //当前用户信息
				votestotal: 0, //主播金币
				socket: null, //
			}
		},
		created() {
			this.myvideo = uni.createVideoContext('myvideo', this);
			this.windowheight = uni.getSystemInfoSync().windowHeight;
		},
		onLoad(option) {
			var item = JSON.parse(option.item);
			// console.log(item)
			this.item = item;
			this.getSelf();//获取当前用户信息
			this.getRoom();// 获取直播信息
			this.getGiftList();// 获取礼物列表
		},
		computed: {
			ptlw_lists() {
			  // 使用 reverse 方法反转数组
			  // return this.ptlw_list.slice().reverse();
			  return this.ptlw_list;
			},
			style() {
				return `width:${this.navItemWidth}px; left:${this.navItemLeft}px`;
			}
		},
		mounted() {
			this.init();
			// 在页面加载完成后，监听整个页面的点击事件
			document.body.addEventListener('click', this.onBodyClick);
		},
		onHide(){
			if(this.timer) {
				clearInterval(this.timer);  
				this.timer = null;  
			} 
			if(this.continuoustimer) {
				clearInterval(this.continuoustimer);  
				this.continuoustimer = null;  
			} 
		},
		methods: {
			// 添加弹幕到队列
			addDanmu(danmuText, duration = 5) { // 默认动画持续时间为10秒
			  // 查找可用的轨道
			  const lineIndex = this.lines.findIndex(line => line === true);
			  if (lineIndex !== -1) {
				this.showDanmu(danmuText, lineIndex, duration);
			  } else {
				// 取时间最久的轨道
				const lineIndex = this.linestime.reduce((minIndex, currentElement, currentIndex, arr) => {
				  return currentElement < arr[minIndex] ? currentIndex : minIndex;
				}, 0); // 初始化最小值索引为 0
				this.showDanmu(danmuText, lineIndex, duration);
			  }
			},
			// 显示弹幕
			showDanmu(danmuText, lineIndex, duration) {
			  this.lines[lineIndex] = false; // 轨道占用
			  // 更新轨道时间
			  this.linestime[lineIndex] = new Date().getTime();
			  
			  const danmuObj = {
			    uname: danmuText.uname,
			    uhead: danmuText.uhead,
				text: danmuText.text,
				ex_time: new Date().getTime() + 10000, // 记录消息时间
				style: { // 应用动画
				  // animation: `moveDanmu ${duration}s linear forwards`,
				  top: `${lineIndex * 100}rpx` // 例如，每条弹幕之间的间隔为30px
				}
			  };
			  this.danmus.push(danmuObj);
			  // 没弹幕后执行
			  if(!this.danmutimer){
				  this.danmutimer = setInterval(()=>{
					let time = new Date().getTime();
					if(this.danmuextime < time){
						this.danmus = [];
						this.lines = [true, true, true];
						clearInterval(this.danmutimer);
						this.danmutimer = null;
					}
				  },5000);
			  }else{
				  this.danmuextime = new Date().getTime() + 10000;
			  }
			},
			// 绘制爱心
			startDrawing(e) {
			      this.drawPath = []; // 开始新的绘制路径
				  console.log('1')
			    },
			    drawHeart(e) {
			      const touch = e.touches[0];
			      const x = touch.x;
			      const y = touch.y;
			      this.drawPath.push({ x, y });
			      // 在当前位置绘制一个小爱心
			      const ctx = uni.createCanvasContext('giftCanvas', this);
			      ctx.drawImage('https://liwu1989.oss-cn-shanghai.aliyuncs.com/photo_2023-08-09_02-58-27_%E5%89%AF%E6%9C%AC_%E5%89%AF%E6%9C%AC.png', x, y, 20, 20); // 调整爱心大小
			      ctx.draw(true); // 进行绘制
				  console.log('2')
			    },
			    finishDrawing() {
			      // 将绘制路径发送到服务器
			      this.socket.emit('heartDrawing', this.drawPath);
				  console.log('3')
			    },
			    showHeartPath(path) {
			      const ctx = uni.createCanvasContext('giftCanvas', this);
			      path.forEach(point => {
			        ctx.drawImage('https://liwu1989.oss-cn-shanghai.aliyuncs.com/photo_2023-08-09_02-58-27_%E5%89%AF%E6%9C%AC_%E5%89%AF%E6%9C%AC.png', point.x, point.y, 20, 20); // 调整爱心大小
			      });
			      ctx.draw(true); // 进行绘制
				  console.log('4')
			    },
			changegiftcount(){
				this.giftcountshow = !this.giftcountshow;
			},
			change(e) {
			  this.giftcount = e;
			  this.giftcountshow = false;
			},
			// 直播间送礼物
			sendGift(){
				var that = this;
				if(this.lwid == ''){
					return;
				}
				this.$api.sendRequest({
					data:{
						service:'Live.sendGift',
						uid:uni.getStorageSync('uid'),
						token:uni.getStorageSync('token'),
						touids:this.item.uid,
						liveuid:this.item.uid,
						stream:this.item.stream,
						giftid:this.lwid,//礼物ID
						giftcount:this.giftcount,//数量
						ispack:0,//是否背包礼物 0:否 1:是
						
					},
					success: res => {
						if(res.data.code == 0){
							var param = res.data.info[0];
							this.sendGiftIm(param.gifttoken);
							// this.continuous = true;
							// 普通礼物连送
							if(this.lwtype == 0){
								this.ctime = 5;
								if(!this.continuoustimer){
									this.continuoustimer = setInterval(() => {
										// console.log(this.ctime)
										if (Number(this.ctime) == 0) {
											// that.continuous = false;
											clearInterval(this.continuoustimer);
											this.continuoustimer = null;
										} else {
											this.ctime--;
										}
									}, 1000)
								}
							}
						}else{
							var msg = res.msg == '' ? res.data.msg : res.msg;
							uni.showToast({
								icon: "none",
								title: msg,
							});
						}
					}
				});
			},
			sendGiftIm(gifttoken){
				let msg_obj = {
					_method_:"SendGift",
					action:"0",
					msgtype:"1",
					level:this.self.level,
					uname:this.self.user_nicename,
					uid:this.self.id,
					uhead:this.self.avatar,
					evensend:"0",
					liangname:this.self.liang.name,
					vip_type:this.self.vip.type,
					ct:gifttoken,
					roomnum:this.item.uid,
					livename:this.self.user_nicename,
					paintedPath:"0",
					paintedHeight:"0",
				};
				let obj = {
					retcode:"000000",
					retmsg:"ok",
					msg:[msg_obj]
				};
				let json_data = JSON.stringify(obj)
				this.socket.emit('broadcast', json_data);
			},
			// 获取用户信息
			getSelf(){
				this.$api.sendRequest({
					data:{
						service:'User.getBaseInfo',
						uid:uni.getStorageSync('uid'),
						token:uni.getStorageSync('token'),
					},
					success: res => {
						if(res.data.code == 0){
							var param = res.data.info[0];
							this.self = param;
							// console.log(param)
						}
					}
				});
			},
			// 礼物背包-禁止滑动
			lwtouchstart(res) {
				this.lwtouchStart = res.touches[0].clientX;
			},
			// 礼物背包-禁止滑动
			lwtouchmove(res) {
				var totalSlides = this.giftlist.length;
				if (this.lwswiperIndex == 0) {
					res.touches[0].clientX > this.lwtouchStart ? this.lwtouch = true : this.lwtouch = false;
					//如果滑动到了第一项，就禁止再向左滑动
				} else if (this.lwswiperIndex == 1) {
					res.touches[0].clientX < this.lwtouchStart ? this.lwtouch = true : this.lwtouch = false;
					//如果滑动到了最后一项，就禁止向右滑动
				} else {
					//以上条件都不符合，就随便滑动
					this.lwtouch = false
				}
			},
			// 礼物列表-禁止滑动
			lwlisttouchstart(res) {
				this.lwlisttouchStart = res.touches[0].clientX;
			},
			// 礼物列表-禁止滑动
			lwlisttouchmove(res) {
				var totalSlides = this.giftlist.length;
				if (this.lwlistIndex == 0) {
					res.touches[0].clientX > this.lwlisttouchStart ? this.lwlisttouch = true : this.lwlisttouch = false;
					//如果滑动到了第一项，就禁止再向左滑动
				} else if (this.lwlistIndex == totalSlides - 1) {
					res.touches[0].clientX < this.lwlisttouchStart ? this.lwlisttouch = true : this.lwlisttouch = false;
					//如果滑动到了最后一项，就禁止向右滑动
				} else {
					//以上条件都不符合，就随便滑动
					this.lwlisttouch = false
				}
			},
			test(){
				this.$refs.svga.render(async (parser, player) => {
				    const videoItem = await parser.load("https://liwu1989.oss-cn-shanghai.aliyuncs.com/%E7%88%B1%E5%BF%83%E5%AE%9A%E6%97%B6%E7%82%B8%E5%BC%B9.svga");
				    await player.setVideoItem(videoItem);
				    // 设置当前动画的循环次数，0代表无限循环 默认 0
				    player.loops = 1
				    // 开始播放动画，reverse = true 时则反向播放。
					this.lwshow = true;
				    player.startAnimation();
				    // 监听动画完成
				    player.onFinished(() => {
						this.lwshow = false;
				        console.log('动画结束')
				    })
				})
			},
			lwlistswiperChange(event) {
				this.lwlistIndex = event.detail.current;
			},
			selectGift(gift) {
				this.lwid = gift.id;
				this.lwtype = gift.type;
				this.giftcountshow = false;
				this.giftcount = "1";
				this.ctime = 0;
				// 处理选中礼物的逻辑
				// console.log('选择了礼物:', gift);
			},
			liwu() {
				this.playiconZIndex = 993;
				this.lwZIndex = 994;
				this.isliwu = !this.isliwu;
				this.$refs.liwu.open();
				// this.init();
			},
			// 隐藏礼物
			onPopupLwClose() {
				// this.giftcountshow = false;
				this.lwid = '';
				this.playiconZIndex = 999;
				this.lwZIndex = 991;
				this.isliwu = !this.isliwu;
				this.$refs.liwu.close();
				this.giftcountshow = false;
				this.giftcount = "1";
			},
			// 点击导航切换lwswiper
			taggleNav(val) {
				this.lwswiperIndex = val;
				// this.scrollDom();
			},
			// 获取dom信息
			init() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.uni-nav').fields({
					rect: true,
					size: true
				}, res => {
					this.componentWidth = res.width / 2;
					this.parentLeft = res.left + (this.componentWidth / 2);
					// console.log('res==>', res);
				});
				query.selectAll('.nav-item').fields({
					rect: true,
					size: true
				}, data => {
					data.forEach((item, index) => {
						if (index == 0) {
							this.navItemWidth = item.width / 2;
							this.navItemLeft = item.left + (this.navItemWidth / 2);
						}
						var width = item.width / 2;
						var left = item.left + (width / 2)
						this.navInfos.push({
							width: width,
							left: left
						});
					});
				});
				query.exec();
			},
			// 滚动tabs以及移动下划线
			scrollDom() {
				let info = this.navInfos[this.lwswiperIndex];
				let offsetLeft = info.left - this.parentLeft;
				let scrollLeft = offsetLeft - (this.componentWidth - info.width) / 2;
				this.scrollToLeft = scrollLeft < 0 ? 0 : scrollLeft;
				this.navItemLeft = this.navInfos[this.lwswiperIndex].left;
				setTimeout(() => {
					this.navItemWidth = info.width;
				}, 50);
			},
			lwswiperChange(e) {
				this.lwswiperIndex = e.detail.current;
				this.scrollDom();
			},
			touchstart(res) {
				this.touchStart = res.touches[0].clientX;
			},
			touchmove(res) {
				if (this.isliwu) { //禁止滑动
					this.touch = true;
					return;
				}
				if (this.swiperIndex == 0) {
					res.touches[0].clientX > this.touchStart ? this.touch = true : this.touch = false;
					//如果滑动到了第一项，就禁止再向左滑动
				} else if (this.swiperIndex == 1) {
					res.touches[0].clientX < this.touchStart ? this.touch = true : this.touch = false;
					//如果滑动到了最后一项，就禁止向右滑动
				} else {
					//以上条件都不符合，就随便滑动
					this.touch = false
				}
			},
			swiperChange(e) {
				this.swiperIndex = e.detail.current;
			},
			// 显示用户信息
			showuser(touid) {
				this.playiconZIndex = 993;
				var token = '';
				var uid = 0;
				if(uni.getStorageSync('token')){
					token = uni.getStorageSync('token');
					uid = uni.getStorageSync('uid');
				}
				this.$api.sendRequest({
					data:{
						service:'Live.getPop',
						uid:uid,
						token:token,
						liveuid:this.item.uid,
						touid:touid,
					},
					success: res => {
						if(res.data.code == 0){
							var param = res.data.info[0];
							this.user = param;
							this.$refs.userinfo.open();
						}else{
							var msg = res.msg == '' ? res.data.msg : res.msg;
							uni.showToast({
								icon: "none",
								title: msg,
							});
						}
					}
				});
				
			},
			// 隐藏用户信息框
			onPopupUserinfoClose() {
				this.playiconZIndex = 999;
				this.$refs.userinfo.close();
			},
			// 隐藏聊天框
			onPopupChatClose() {
				this.$refs.chat.close();
			},
			randomNum(min, max) {
				return Math.floor(Math.random() * (max - min)) + min;
			},
			getLikeParams(e) {
				const classLists = [
					'icon-animate-1',
					'icon-animate-2',
					'icon-animate-3',
					'icon-animate-4',
					'icon-animate-5',
					'icon-animate-6',
					'icon-animate-7',
					'icon-animate-8',
					'icon-animate-9'
				];
				const colorList = ['#A084CA', '#AAC4FF', '#FF9494', '#FA7070', '#5CB8E4', '#87A2FB', '#C7F2A4'];

				const className = classLists[this.randomNum(0, classLists.length)];
				const colorName = colorList[this.randomNum(0, colorList.length)];

				return {
					animate: className,
					color: colorName,
					name: 'heart-fill',
					id: `${new Date().getTime()}-likes`,
					x: e.x,
					y: e.y,
				};
			},
			sendLove: _.throttle(function(e) {

				new Promise(reslove => {
					// console.log(e)
					const params = this.getLikeParams(e.target);
					this.likesData.push(params);
					this.total += 1;
					this.$emit('getTotal', this.total);
					setTimeout(() => {
						reslove(params);
					}, 5000);
				}).then(res => {
					this.likesData.shift();
				});
			}, 10),
			handleDoubleClick() {
				// 处理双击事件的逻辑
				// console.log("双击事件触发了！");
			},
			// 弹幕
			dmchange() {
				this.isdm = !this.isdm;
				if (this.isdm) {
					this.placeholder = "开启弹幕，10钻石/条";
				} else {
					this.placeholder = "和大家说些什么";
				}
			},
			// 弹出输入框
			openInput() {
				this.showInput = true;
				this.inputFocus = true;
				this.$refs.chat.open('bottom');
			},
			// 输入内容
			onInput(e) {
				this.inputModel = e.detail.value;
			},
			// 失去焦点-废弃
			blurInput(e) {
				// return false;
				// this.showInput = false;
				// this.inputFocus = false;
			},
			// 点击页面其他区域时触发
			onBodyClick(event) {
				// 处理礼物数量框
				if(this.giftcountshow){
						  
					// if (!event.target.classList.contains('picker')) {
					// 	console.log(event.target)
					// 	// this.giftcountshow = false;
					// }
					// this.giftcountshow = !this.giftcountshow;
				}
				// const clickedElement = event.target.offsetParent;
				// if (event.target.offsetParent == undefined) {
					// return;
				// }
				// console.log(event)
				// 判断点击的元素是否包含特定的类名（假设类名为"input-class"）
				// if (!clickedElement.classList.contains('openInput')) {
					// this.showInput = false;
				// }
			},
			
			close() {
				uni.switchTab({
					url: "/pages/index/index",
				})
				// 发送点击事件给父组件
				// this.$emit('roomClick');
			},
			// 获取直播间信息
			getRoom() {
				var token = '';
				var uid = 0;
				if(uni.getStorageSync('token')){
					token = uni.getStorageSync('token');
					uid = uni.getStorageSync('uid');
				}
				this.$api.sendRequest({
					data:{
						service:'Live.enterRoom',
						uid:uid,
						token:token,
						liveuid:this.item.uid,
						stream:this.item.stream,
						device:uni.getSystemInfoSync()['deviceId'],
					},
					success: res => {
						if(res.data.code == 0){
							var param = res.data.info[0];
							this.room = param;
							this.pull = this.$api.decrypt(param.pull);
							this.chatserver = this.$api.decrypt(param.chatserver);
							this.userlists = param.userlists;
							this.isattention = param.isattention;
							this.votestotal = param.votestotal;
							this.getwebsocket();
							// console.log(this.isattention);
							this.timer = setInterval(()=>{
								this.getUserLists();
							},param.userlist_time * 1000);
						}else{
							var msg = res.msg == '' ? res.data.msg : res.msg;
							uni.showToast({
								icon: "none",
								title: msg,
							});
						}
					}
				});
			},
			// 获取用户列表
			getUserLists() {
				var token = '';
				var uid = 0;
				if(uni.getStorageSync('token')){
					token = uni.getStorageSync('token');
					uid = uni.getStorageSync('uid');
				}
				this.$api.sendRequest({
					data:{
						service:'Live.getuserlists',
						uid:uid,
						token:token,
						liveuid:this.item.uid,
						stream:this.item.stream,
					},
					success: res => {
						if(res.data.code == 0){
							var param = res.data.info[0];
							this.userlists = param.userlist;
						}else{
							var msg = res.msg == '' ? res.data.msg : res.msg;
							uni.showToast({
								icon: "none",
								title: msg,
							});
						}
					}
				});
			},
			// 获取礼物列表
			getGiftList(){
				var token = '';
				var uid = 0;
				if(uni.getStorageSync('token')){
					token = uni.getStorageSync('token');
					uid = uni.getStorageSync('uid');
				}
				this.$api.sendRequest({
					data:{
						service:'Live.getGiftList',
						uid:uid,
						token:token,
						live_type:this.item.type,
					},
					success: res => {
						if(res.data.code == 0){
							var param = res.data.info[0];
							this.giftlist = this.$api.group(param.giftlist,8);
							// this.proplist = this.$api.group(param.proplist,8);
							// console.log(this.proplist)
							this.coin = param.coin;
						}else{
							var msg = res.msg == '' ? res.data.msg : res.msg;
							uni.showToast({
								icon: "none",
								title: msg,
							});
						}
					}
				});
			},
			// 添加印象
			addlabel(){
				
			},
			// 关注|取消关注
			setAttent(touid){
				var token = '';
				var uid = 0;
				if(uni.getStorageSync('token')){
					token = uni.getStorageSync('token');
					uid = uni.getStorageSync('uid');
				}
				this.$api.sendRequest({
					data:{
						service:'User.setAttent',
						uid:uid,
						token:token,
						touid:touid,
					},
					success: res => {
						if(res.data.code == 0){
							var param = res.data.info[0];
							this.user.isattention = param.isattent;
							if(touid == this.item.uid){
								this.isattention = param.isattent;
							}
						}else{
							var msg = res.msg == '' ? res.data.msg : res.msg;
							uni.showToast({
								icon: "none",
								title: msg,
							});
						}
					}
				});
			},
			// @TA
			ata(content){
				this.onPopupUserinfoClose();
				this.inputModel = content;
				this.showInput = true;
				this.inputFocus = true;
				this.$refs.chat.open('bottom');
			},
			// 私信
			chat(){
				this.onPopupUserinfoClose();
				this.playiconZIndex = 993;
				this.$refs.sixin.open('bottom');
			},
			// 隐藏私信框
			onPopupSixinClose() {
				this.playiconZIndex = 999;
				this.$refs.sixin.close();
			},
			getwebsocket() {
				// 连接到 Socket.io 服务器
				// const socket = io(this.chatserver);
				this.socket = io(this.chatserver);
				var token = '';
				var uid = 0;
				if(uni.getStorageSync('token')){
					token = uni.getStorageSync('token');
					uid = uni.getStorageSync('uid');
				}
				//进入直播间
				const conn_data = {
					'uid':uid,
					'token':token,
					'liveuid':this.item.uid,
					'roomnum':this.item.uid,
					'stream':this.item.stream
				};
				// 发送消息到服务器
				this.socket.emit('conn', conn_data);
				// 监听来自服务器的消息
				this.socket.on('broadcastingListen', data => {
					// console.log('----接收到服务器消息----');
					let msgObj = JSON.parse(data);
					if(msgObj.retcode == '000000'){
						let msg = msgObj.msg[0];
						// console.log(msg);
						// 礼物特效
						if(msg.msgtype == 1){
							// console.log(msg);
							let ct = msg.ct;
							if(ct.mark == 0){
								// 定时清除普通礼物
								this.ptlwInterval({
								  giftid: ct.giftid,
								  uid: msg.uid,
								  uhead: msg.uhead,
								  uname: msg.uname,
								  giftname: ct.giftname,
								  gifticon: ct.gifticon,
								  giftcount: ct.giftcount,
								  isani: true,
								  ex_time: new Date().getTime() + 5000 // 记录消息时间
								});
							}
							// 豪华礼物
							if(ct.mark == 1){
								this.hhlw_list.push(ct.swf);
								this.hhlwPlayer();
							}
							// 弹幕
							if(msg._method_ == 'SendBarrage'){
								this.addDanmu({
									uname:msg.uname,
									uhead:msg.uhead,
									text:ct.content,
									duration:10000,
								});
								
								// this.addDanmaku({
								// 	uname:msg.uname,
								// 	uhead:msg.uhead,
								// 	text:ct.content,
								// });
							}
						}
						if(msg.msgtype == 0){
							let ct = msg.ct;
							Object.assign(msg, ct);
							msg.ct = '进入直播间';
							this.msgRoom = msg;
							// console.log(this.msgRoom)
						}else{
							this.msgList.push(msg);
							// console.log(this.msgList)
							this.$refs.msgList.setMsgPanelScroll();
						}
						
					}
					
				});
			},
			// 豪华礼物
			hhlwPlayer(){
				if(!this.lwshow){
					var src = this.hhlw_list[0];
					this.$refs.svga.render(async (parser, player) => {
						const videoItem = await parser.load(src);
						await player.setVideoItem(videoItem);
						// 设置当前动画的循环次数，0代表无限循环 默认 0
						player.loops = 1
						// 开始播放动画，reverse = true 时则反向播放。
						this.lwshow = true;
						player.startAnimation();
						// 监听动画完成
						player.onFinished(() => {
							this.lwshow = false;
							this.hhlw_list.shift();
							if(this.hhlw_list.length != 0){
								console.log('执行下一个')
								this.hhlwPlayer();
							}
							console.log('动画结束')
						})
					})
				}
			},
			// 普通礼物定时器
			ptlwInterval(data){
				// 连送处理
				let isexist = false;
				let ptlwindex = 0;
				var that = this;
				this.ptlw_list.forEach((item, index) => {
					if(item.uid == data.uid && item.giftid == data.giftid){
						this.ptlw_list[index].giftcount = Number(item.giftcount) + Number(data.giftcount);
						this.ptlw_list[index].ex_time = new Date().getTime() + 5000;
						this.ptlw_list[index].isani = false;
						isexist = true;
						ptlwindex = index;
					}
				});
				// console.log(this.ptlw_list)
				if(!isexist){
					this.ptlw_list.push(data);
				}else{
					setTimeout(function(){
						that.ptlw_list[ptlwindex].isani = true;
					},100)
				}
				// console.log(this.ptlw_list)
				this.ptlwshow = true;
				// 清除过期礼物
				if(!this.ptlwtimer){
					this.ptlwtimer = setInterval(() => { 
						// console.log('1122')
						const currentTime = new Date().getTime();
						this.ptlw_list = this.ptlw_list.filter(item => item.ex_time > currentTime);
						if(this.ptlw_list.length == 0){
							clearInterval(this.ptlwtimer);
							this.ptlwtimer = null;
						}
					}, 1000)
				}
			},
			// 发送消息
			sendMsg() {
				if(this.isdm){
					this.$api.sendRequest({
						data:{
							service:'Live.sendBarrage',
							uid:uni.getStorageSync('uid'),
							token:uni.getStorageSync('token'),
							liveuid:this.item.uid,
							stream:this.item.stream,
							giftid:1,//礼物ID
							giftcount:1,//数量
							content:this.inputModel,
							
						},
						success: res => {
							if(res.data.code == 0){
								var param = res.data.info[0];
								let msg_obj = {
									_method_:"SendBarrage",
									action:"7",
									msgtype:"1",
									level:this.self.level,
									uname:this.self.user_nicename,
									uid:this.self.id,
									uhead:this.self.avatar,
									ct:param.barragetoken,
								};
								let obj = {
									retcode:"000000",
									retmsg:"ok",
									msg:[msg_obj]
								};
								let json_data = JSON.stringify(obj)
								this.socket.emit('broadcast', json_data);
								this.inputModel = '';
								
							}else{
								var msg = res.msg == '' ? res.data.msg : res.msg;
								uni.showToast({
									icon: "none",
									title: msg,
								});
							}
						}
					});
				}else{
					let msg_obj = {
						_method_:"SendMsg",
						action:"0",
						msgtype:"2",
						usertype:this.room.usertype,
						isAnchor:"0",
						level:this.self.level,
						uname:this.self.user_nicename,
						uid:this.self.id,
						liangname:this.self.liang.name,
						vip_type:this.self.vip.type,
						guard_type:this.room.guard.type,
						guard_type:"0",
						ct:this.inputModel,
					};
					let obj = {
						retcode:"000000",
						retmsg:"ok",
						msg:[msg_obj]
					};
					let json_data = JSON.stringify(obj)
					this.socket.emit('broadcast', json_data);
					this.inputModel = '';
				}
			},
			playvideo() {
				this.videoshow = true;
				this.myvideo.play();
			},
			// 播放失败
			error(e) {
				this.videoshow = false
				console.log(e);
				uni.showModal({
					content: "资源加载错误，请重试",
					confirmText: "重试",
					success: (res) => {
						if (res.confirm) {
							uni.createVideoContext('myvideo').play()
						}
						if (res.cancel) {
							uni.navigateBack()
						}
					}
				})
			},
		},

		beforeDestroy() {
			if(this.timer) {
				clearInterval(this.timer);  
				this.timer = null;  
			} 
			if (this.socket) {
			    this.socket.disconnect();
			}
			// 在页面销毁之前，移除页面的点击事件监听
			document.body.removeEventListener('click', this.onBodyClick);
		}
	}
</script>

<style lang="scss" scoped>
	.fade-enter-active, .fade-leave-active {
	  transition: 0.3s;
	}
	.fade-enter, .fade-leave-to{
	   opacity: 0;
	  transform: translateY(25rem);
	}
	
	.hdlw{
		width: 750rpx;
		height: calc(100vh - 600rpx);
		position: absolute;
		top: 0;
		z-index: 999;
		background-color: #00000075;
		.qy-container{
			position: absolute;
			top: 180rpx;
			width: 100%;
			.qy{
				width: 200rpx;
				height: 200rpx;
				margin: auto;
				// margin-top: 360rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.desc{
				text-align: center;
				padding-top: 20rpx;
				color: #ffffff;
				font-size: 26rpx;
			}
			
		}
		.gift-canvas {
		  width: 100%;
		  height: 100%;
		  background-color: #00000075;
		}
	}
	.liwulist {
		width: 750rpx;
		height: 600rpx;
		position: absolute;
		// z-index: 991;
		bottom: 0px;
		background-color: #151515;
		border-radius: 12rpx 12rpx 0 0;
		overflow: hidden;

		.nav-scroll {
			width: 100%;
			height: 80rpx;
			display: flex;
			justify-content: space-between;

			.nav {
				white-space: nowrap;
				height: 80upx;
				display: flex;
				// justify-content: space-between;
				align-items: center;
				padding: 0 20rpx;
				position: relative;

				// border-bottom: 2rpx solid #5a5959;
				.nav-item {
					display: inline-block;
					margin: 0 16upx;
					text-align: center;
					transition: color 0.3s ease;
				}

				.tab {
					font-size: 30rpx;
					color: #5a5959;
				}

				.nav-item-act {
					color: #ffffff;
					// font-size: 30rpx;
				}

				.nav-line {
					position: absolute;
					bottom: 0;
					height: 10upx;
					border-radius: 10upx;
					background-color: #ffffff;
					transition: left 0.3s ease;
				}
			}

			.lwdesc {
				color: #b7b5b5;
				font-size: 30rpx;
				display: flex;
				align-items: center;
				margin-right: 20rpx;

				image {
					margin-left: 4rpx;
					width: 18rpx;
					height: 18rpx;
				}
			}
		}

		.lwswiper {
			width: 750rpx;
			height: 520rpx;

			.swiper-2 {
				width: 750rpx;
				height: 520rpx;
			}

			.lwdetail {
				width: 750rpx;
				height: 520rpx;
				
				.lwtop {
					width: 750rpx;
					height: 420rpx;

					.swiper-3 {
						width: 750rpx;
						height: 375rpx;
						// height: 420rpx;
						background-image: url('@/static/image/room/1t.png');
						background-size: 100%;
					}

					.page {
						
						// padding: 10rpx;
						width: 750rpx;
						height: 375rpx;
						display: flex;
						flex-wrap: wrap;
						align-items: center;
						// border-bottom: 2rpx solid #2d2d2d;
						// border-left: 2rpx solid #2d2d2d;
						// border-right: 2rpx solid #2d2d2d;
						// box-sizing: border-box;
					}
					.active{
						border: 2rpx solid #aaffff !important;
					}
					.gift:nth-child(4n) {
						// border-right: 2rpx solid #2d2d2d;
					}

					.gift {
						width: 187.5rpx;
						height: 187.5rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						// border-top: 2rpx solid #2d2d2d;
						// border-left: 2rpx solid #2d2d2d;
						box-sizing: border-box;

						.gift-image {
							width: 100rpx;
							height: 100rpx;
						}

						.gift-name {
							font-size: 28rpx;
							color: #ffffff;
						}
						.gift-money {
							font-size: 26rpx;
							color: #807e7e;
						}
					}
					.my-dot-box {
							margin-top: 10rpx;
							width: 100%;
							height: 20rpx;
							display: flex;
							justify-content: center;
							align-items: center;
					
							.dot-default {
								width: 12rpx;
								height: 12rpx;
								background: #666666;
								// opacity: 0.2;
								border-radius: 100%;
								margin: 0 6rpx;
								transform-origin: left;
								transition: linear 0.3s;
							}
					
							.dot-active {
								width: 12rpx;
								height: 12rpx;
								border-radius: 100%;
								background: #ffffff;
								opacity: 1;
							}
						}


				}
				.lwbottom{
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 20rpx;
					height: 100rpx;
					.left{
						display: flex;
						align-items: center;
						
						.one{
							width: 50rpx;
							height: 50rpx;
							image{
								width: 100%;
								height: 100%;
							}
						}
						.two{
							margin: 0 10rpx;
							color: #ffffff;
							font-size: 26rpx;
						}
						.three{
							color: #0b81ff;
							font-size: 26rpx;
							image {
								margin-left: 4rpx;
								width: 18rpx;
								height: 18rpx;
							}
						}
					}
					.active{
						background-color: #C089FF !important;
						color: #ffffff !important;
					}
					.right{
						border: 2rpx solid #C089FF;
						background-color: #312a2a;
						color: #848080;
						font-size: 26rpx;
						// padding: 10rpx 30rpx;
						width: 100rpx;
						height: 50rpx;
						line-height: 50rpx;
						border-radius: 50rpx;
						text-align: center;
					}
					.right2{
						border: 2rpx solid #C089FF;
						display: flex;
						border-radius: 50rpx;
						.picker{
							width: 100rpx;
							height: 50rpx;
							line-height: 50rpx;
							display: flex;
							color: #C089FF;
							font-size: 26rpx;
							align-items: center;
							justify-content: space-around;
							image{
								width: 30rpx;
								height: 30rpx;
							}
						}
						.zstop{
							position: absolute;
							bottom: 80rpx;
							overflow: hidden;
							z-index: 993; 
							display: inline-grid;
							justify-items: center;
							.list{
								font-size: 26rpx;
								color: #C089FF;
								text-align: center;
								background: white;
								padding: 4rpx 20rpx;
								border-radius: 6rpx;
								.item{
									padding: 6rpx 0;
								}
							}
							.arrow-up {
							  display: flex;
							  width: 28rpx;
							  height: 14rpx;
							  image{
								  width: 100%;
								  height: 100%;
							  }
							}
						}
						
						.right{
							border: none !important;
							border-radius: 0 50rpx 50rpx 0 !important;
						}
					}
					.right3{
						position: absolute;
						bottom: 4rpx;
						right: 20rpx;
						width: 140rpx;
						height: 140rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;
						font-size: 26rpx;
						background-image: url('@/static/image/room/continuous.png');
						background-size: 100%;
						color: #ffffff;
						view{
							align-self: center;
						}
					}
				}
			}
		}
	}

	scroll-view ::v-deep ::-webkit-scrollbar {
		display: none;
	}

	/deep/.uni-swiper-wrapper {
		z-index: 993;
	}

	swiper {
		width: 100vw;
	}

	.uni-popup {
		z-index: 994;
	}

	page {
		background-color: #000000;

		height: 100%;
	}

	.content {
		width: 750rpx;
		height: 100%;
		// height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.video-container {
		position: absolute;
		display: flex;
		justify-content: center;
		align-items: center;
		height: auto;
		overflow: hidden;
		/* 隐藏视频超出容器的部分 */
	}

	#myvideo {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	@media (orientation: portrait) {
		#myvideo {
			width: 100vw;
			// height: auto;
			height: 100vh;
		}
	}

	@media (orientation: landscape) {
		#myvideo {
			width: auto;
			height: 100vh;
		}
	}
	// 礼物动画
	.lwdh {
		position: absolute;
		display: flex;
		justify-content: center;
		align-items: center;
		height: auto;
		overflow: hidden;
		width: 750rpx;
		z-index: 994;
		/* 隐藏视频超出容器的部分 */
		#lwimg{
			width: 100%;
			// height: 100%;
			// object-fit: contain;
		}
		// @media (orientation: portrait) {
		// 	#lwimg {
		// 		width: 100vw;
		// 		height: auto;
		// 		// height: 100vh;
		// 	}
		// }
		
		// @media (orientation: landscape) {
		// 	#lwimg {
		// 		width: auto;
		// 		height: 100vh;
		// 	}
		// }
	}
	.fengmian-image {
		position: fixed;
		top: 0;
		left: 0;
		width: 750rpx;
		background-color: #000000;
		z-index: 992;
		height: 100vh;
	}

	.playicon {
		position: absolute;
		width: 150rpx;
		height: 150rpx;
		left: 310rpx;
		opacity: 0.6;
		// z-index: 999;
	}

	.top {
		position: absolute;
		width: 710rpx;
		top: 20rpx;
		z-index: 993;
		padding: 20rpx;
		display: flex;
		justify-content: space-between;

		.left {
			.zhubodata {
				background-color: #0000005c;
				display: flex;
				width: fit-content;
				justify-content: flex-start;
				align-items: center;
				height: 68rpx;
				border-radius: 40rpx;
				padding: 6rpx;

				.himg {
					width: 68rpx;
					height: 68rpx;
					border-radius: 60rpx;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.userdata {
					margin: 0 6rpx;

					.nickname {
						color: #ffffff;
						font-size: 24rpx;
					}

					.id {
						color: #ffffff;
						font-size: 16rpx;
					}
				}

				.guanzhu {
					background-image: linear-gradient(90deg,
							rgba(198, 148, 254, 1) 0,
							rgba(95, 195, 254, 1) 100%);
					padding: 18rpx 20rpx;
					border-radius: 60rpx;
					color: #ffffff;
					font-size: 20rpx;
				}
			}

			.other {
				margin-top: 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.hudou,
				.shouhu {
					text-align: center;
					border-radius: 60rpx;
					background-color: #0000005c;
					color: #ffffff;
					font-size: 20rpx;
					padding: 10rpx 6rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					image {
						margin-left: 4rpx;
						width: 18rpx;
						height: 18rpx;
					}
				}

				.hudou {
					margin-right: 10rpx;
				}

				.shouhu {}
			}
		}

		.right {
			display: flex;

			.fsimg {
				width: 68rpx;
				height: 68rpx;
				border-radius: 60rpx;
				overflow: hidden;
				margin-right: 4rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.bottombtn {
		position: absolute;
		width: 710rpx;
		bottom: 0rpx;
		z-index: 993;
		padding: 20rpx;
		display: flex;
		justify-content: space-between;

		.left {
			.chat {
				width: 68rpx;
				height: 68rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.right {
			display: flex;
			justify-content: space-between;

			.liwu,
			.xinxi,
			.close {
				width: 68rpx;
				height: 68rpx;
				margin-right: 16rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.close {
				margin-right: 0;
			}
		}
	}
	.danmaku-display{
		position: absolute;
		z-index: 993;
		left: 0;
		top: 220rpx;
		width: 100%;
		height: 300rpx; /* 三行弹幕 */
		overflow: hidden;
		
		.danmu-container {
		  position: relative;
		  overflow: hidden;
		  width: 100%;
		  height: 300rpx; /* 根据需要调整高度 */
		}
		.danmu {
		  position: absolute;
		  white-space: nowrap;
		  right: 0;
		  // transform: translateX(100vw);
		  color: #fff;
		  padding: 5px;
		  // background-color: rgba(0, 0, 0, 0.5);
		  border-radius: 10px;
		  animation: moveDanmu 5s linear forwards;
		    .dm-item{
		    	// display: -webkit-box;
		    	// align-items: center;
				display: flex;
				align-items: flex-end;
		    	// left: 750rpx;
		    	.dm-item-img{
		    		width: 80rpx;
		    		height: 80rpx;
		    		image{
		    			width: 100%;
		    			height: 100%;
		    			border-radius: 60rpx;
		    		}
		    	}
		    	.dm-item-data{
		    		margin-left: 10rpx;
		    		.dm-item-data-one{
		    			color: #0b81ff;
		    			font-size: 30rpx;
		    		}
		    		.dm-item-data-two{
		    			background-color: #38383896;
		    			color: #ffffff;
		    			font-size: 30rpx;
		    			padding: 4rpx 40rpx;
		    			margin-left: -40rpx;
		    			border-radius: 8rpx;
		    		}
		    	}
		    }
		}
		@keyframes moveDanmu {
		  0% {
			  transform: translateX(0);
		    // transform: translateX(100vw); /* 从屏幕右侧开始 */
		  }
		  100% {
			  transform: translateX(-750rpx);
		    // transform: translateX(-100%); /* 移动到屏幕左侧外部 */
		  }
		}
		
	}
	.ptlw-view {
		position: absolute;
		z-index: 993;
		// width: 490rpx;
		// height: 120rpx;
		left: 10rpx;
		// top: 300rpx;
		bottom: 800rpx;
		background-image: url('@/static/image/room/M66.png');
		background-size: 100%;
		// overflow: hidden;
		// display: flex;
		.ptlw_item{
			width: 470rpx;
			height: 100rpx;
			
			padding: 10rpx;
			display: flex;
			align-items: center;
			.scrolling-image-container {
			  // overflow: hidden;
			  position: absolute;
			  left: 0;
			  width: 470rpx;
			  height: 100rpx;
			  .scrolling-image{
			  	width: 100%;
			  	height: 100%;
			  	position: absolute;
				left: -470rpx;
				animation-name: scrollRight;
				animation-duration: 0.5s;
				animation-fill-mode: forwards;
			  }
			  @keyframes scrollRight {
			    0% {
			      transform: translateX(0);
			  	  opacity: 1;
			    }
				99% {
				  transform: translateX(470rpx);
				  opacity: 1;
				}
				100% {
				  transform: translateX(470rpx);
				  opacity: 0;
				}
			  }
			}
			.boomimg-container {
			  width: 100rpx;
			  height: 100rpx;
			  position: relative;
			  right: -100rpx;
			  .boomimg{
			  	width: 100%;
			  	height: 100%;
				animation-name: scrollRight1;
				animation-duration: 1s;
				animation-fill-mode: forwards;
			  	// animation: scrollRight 1s linear infinite; /* 调整动画时间和速度 */
			  }
			  @keyframes scrollRight1 {
			    0% {
			  	  opacity: 0;
			    }
				50% {
				  opacity: 0;
				}
				55% {
				  opacity: 1;
				}
				100% {
				  opacity: 0;
				}
			  }
			}
			.ptlw_item_one{
				width: 76rpx;
				height: 76rpx;
				// display: flex;
				// margin-right: 10rpx;
				image{
					width: 100%;
					height: 100%;
					border-radius: 60rpx;
				}
			}
			.ptlw_item_two{
				// width: 150rpx;
				margin: 0 10rpx;
				.ptlw_item_two_name{
					color: #A0CFFF;
					font-size: 26rpx;
				}
				.ptlw_item_two_title{
					font-size: 26rpx;
					color: #ffffff;
					text{
						margin-left: 4rpx;
						color: #ff5f5f;
					}
				}
			}
			.ptlw_item_three{
				width: 76rpx;
				height: 76rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.ptlw_item_four{
				font-size: 36rpx;
				font-weight: bold;
				font-style: italic;
				color: #ffdd00;
				margin: 0 20rpx;
				margin-top: 20rpx;
			}
			.ptlw_item_five{
				position: absolute;
				left: 360rpx;
				margin-bottom: 40rpx;
				font-size: 100rpx;
				// color: #ffa707;
				font-family: fantasy;
				transform: skew(350deg);
				// font-style: italic;
				background: linear-gradient(to bottom, #ffe400,#ffa900);
				background-clip: text;
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				
			}
			.ptlw_item_five_ani{
				animation: growAndShrink 0.3s ease; /* 使用动画效果 */
				@keyframes growAndShrink {
				  0% {
				    font-size: 100rpx;
				  }
				  50% {
				    font-size: 170rpx;
				  }
				  80% {
				    font-size: 80rpx;
				  }
				  100% {
				    font-size: 100rpx;
				  }
				  
				}
			}
		}
	}
	.msg-view {
		position: absolute;
		z-index: 992;
		width: 550rpx;
		height: 500rpx;
		left: 10rpx;
		bottom: 110rpx;
	}

	.btnchat {
		background-color: #f0f0f0;
		position: relative;
		z-index: 994;
		width: 730rpx;
		// height: 500rpx;
		bottom: 0rpx;
		display: flex;
		align-items: center;
		padding: 12rpx;

		.left {
			width: 100rpx;
			height: 50rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.middle {
			padding: 6rpx 10rpx;
			margin: 0 20rpx;
			border-radius: 60rpx;
			width: 500rpx;
			background-color: #ffffff;

			.form-input {
				height: 38rpx;
				line-height: 38rpx;
				text-indent: 10rpx;
				font-size: 30rpx;
				color: #000000;
			}
		}

		.right {
			width: 70rpx;
			height: 70rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.userinfo1 {
		width: 750rpx;
		height: 710rpx;
		position: relative;
		bottom: 0px;
		background-color: #FFFFFF;
		z-index: 993;
		border-radius: 16rpx 16rpx 0 0;

		// display: flex;
		.top1 {
			padding: 20rpx;

			.one {
				width: 710rpx;
				// padding: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					width: 140rpx;
					height: 140rpx;
					border-radius: 120rpx;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.isguanzhu {
					border-radius: 8rpx;
					padding: 20rpx 140rpx;

					background-image: linear-gradient(270deg,
							rgba(96, 195, 254, 1) 0,
							rgba(197, 148, 254, 1) 100%);
					color: #ffffff;
					font-size: 30rpx;

				}

				.right {
					width: 180rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.rimg {
						width: 80rpx;
						height: 80rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.rimg2 {
						margin-left: 20rpx;
					}
				}
			}

			.two {
				width: 710rpx;
				padding: 20rpx 0;
				border-bottom: 2rpx solid #e8e8e8;

				.username {
					display: flex;
					align-items: center;
					color: #3D3D3D;
					font-size: 32rpx;

					image {
						margin-left: 10rpx;
						width: 40rpx;
						height: 32rpx;
					}
				}

				.id {
					color: #999999;
					font-size: 24rpx;
					display: flex;
					align-items: center;
					margin-top: 6rpx;

					.locate {
						margin-left: 10rpx;
						width: 30rpx;
						height: 30rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}

				.achieve {
					margin: 6rpx 0;
					display: flex;
					align-items: center;
					.ach{
						margin-right: 20rpx;
						.achimg{
							width: 60rpx;
							height: 30rpx;
							image {
								width: 100%;
								height: 100%;
							}
						}
					}
				}
			}

			.three {
				padding: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.three_li {
					text-align: center;
					margin-right: 20rpx;

					.three_item1 {
						color: #3D3D3D;
						font-size: 28rpx;
					}

					.three_item2 {
						color: #999999;
						font-size: 28rpx;
					}
				}
			}

			.four {
				width: 710rpx;
				padding: 20rpx;
				display: flex;
				align-items: center;

				.four_li {
					margin-right: 20rpx;
					background-color: #F2F2F2;
					border-radius: 8rpx;
					font-size: 24rpx;
					color: #ffffff;
					padding: 6rpx 16rpx;
				}
				.four_li1 {
					background-color: #D6B3FF;
				}
			}

		}

		.bottom1 {
			position: absolute;
			width: 710rpx;
			padding: 20rpx;
			bottom: 0;
			box-shadow: 0rpx -12rpx 72rpx -28rpx rgba(0, 0, 0, 0.1);
			background-color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.xiaoxi,
			.ata {
				background-color: #D6B3FF;
				color: #ffffff;
				font-size: 28rpx;
				padding: 20rpx 130rpx;
				border-radius: 8rpx;
			}
		}
	}
	.chat_content{
		width: 750rpx;
		height: 980rpx;
		// position: absolute;
		// bottom: 0px;
		position: relative;
		bottom: 0px;
		background-color: #FFFFFF;
		z-index: 993;
	}
</style>
<!-- 爱心 -->
<style lang="scss" scoped>
	.xinxi {
		.icon-style {
			/deep/ .u-icon__icon {
				transition: all 0.1s;
				font-size: 28px !important;
			}
		}

		.icon-style:active {
			/deep/ .u-icon__icon {
				font-size: 24px !important;
			}
		}

		.icon-default {
			position: absolute;
			z-index: 994;

			/deep/ .u-icon__icon {
				font-size: 28px !important;
			}
		}

		.icon-animate-1 {
			animation: animate-1-left 2.4s ease-in-out, animate-1-top 2.4s cubic-bezier(0.66, 0.1, 1, 0.41);
			animation-fill-mode: forwards;
		}

		@keyframes animate-1-top {
			0% {
				top: 40rpx;
				opacity: 1;
			}

			100% {
				top: -400rpx;
				opacity: 0;
			}
		}

		@keyframes animate-1-left {
			0% {
				margin-left: 0;
			}

			100% {
				margin-left: -200rpx;
			}
		}

		.icon-animate-2 {
			animation: animate-2 2.4s ease-in-out;
			animation-fill-mode: forwards;
		}

		@keyframes animate-2 {
			0% {
				top: 40rpx;
				opacity: 1;
			}

			100% {
				top: -360rpx;
				opacity: 0;
			}
		}

		.icon-animate-3 {
			animation: animate-3-right 2.4s ease-in-out, animate-3-top 2.4s cubic-bezier(0.66, 0.1, 1, 0.41);
			animation-fill-mode: forwards;
		}

		@keyframes animate-3-top {
			0% {
				top: 40rpx;
				opacity: 1;
			}

			100% {
				top: -320rpx;
				opacity: 0;
			}
		}

		@keyframes animate-3-right {
			0% {
				margin-left: 0;
			}

			100% {
				margin-left: 60rpx;
			}
		}

		.icon-animate-4 {
			animation: animate-4 2.4s ease-in-out;
			animation-fill-mode: forwards;
		}

		@keyframes animate-4 {
			0% {
				top: 40rpx;
				margin-left: 0;
				opacity: 1;
			}

			100% {
				top: -320rpx;
				margin-left: -136rpx;
				opacity: 0;
			}
		}

		.icon-animate-5 {
			animation: animate-5 2.4s ease-in-out;
			animation-fill-mode: forwards;
		}

		@keyframes animate-5 {
			0% {
				top: 40rpx;
				margin-left: 0;
				opacity: 1;
			}

			100% {
				top: -400rpx;
				margin-left: 104rpx;
				opacity: 0;
			}
		}

		.icon-animate-6 {
			animation: animate-6 2.4s linear;
			animation-fill-mode: forwards;
		}

		@keyframes animate-6 {
			0% {
				top: 40rpx;
				margin-left: 0;
				opacity: 1;
			}

			100% {
				top: -400rpx;
				margin-left: -140rpx;
				opacity: 0;
			}
		}

		.icon-animate-7 {
			animation: animate-7 2.4s linear;
			animation-fill-mode: forwards;
		}

		@keyframes animate-7 {
			0% {
				top: 40rpx;
				margin-left: 0;
				opacity: 1;
			}

			100% {
				top: -280rpx;
				margin-left: 124rpx;
				opacity: 0;
			}
		}

		.icon-animate-8 {
			animation: animate-8 2.4s linear;
			animation-fill-mode: forwards;
		}

		@keyframes animate-8 {
			0% {
				top: 40rpx;
				margin-left: 0;
				opacity: 1;
			}

			100% {
				top: -360rpx;
				margin-left: 44rpx;
				opacity: 0;
			}
		}

		.icon-animate-9 {
			animation: animate-9 2.4s linear;
			animation-fill-mode: forwards;
		}

		@keyframes animate-9 {
			0% {
				top: 40rpx;
				margin-left: 0;
				opacity: 1;
			}

			100% {
				top: -440rpx;
				margin-left: -44rpx;
				opacity: 0;
			}
		}
	}
</style>
<!-- 礼物 -->